<template>
  <div v-if="systeminfo">
    <el-form :model="Rams" ref="ruleForm" label-width="100px" class="demo-ruleForm from">
      <div class="title">
        {{$t('TabRam_Runsettings')}}
<!--        运行设置-->
      </div>
      <el-form-item :label="$t('TabRam_Privilegedmode')" prop="Privileged">
<!--        Privilegedmode:"特权模式",-->
        <el-switch v-model="Rams.Privileged"></el-switch>
      </el-form-item>
      <el-form-item :label="$t('TabRam_function')" prop="Runtime">
<!--       运行 -->
        <el-select v-model="Rams.Runtime" :placeholder="'运行方式'">
          <el-option label="default" value=""></el-option>
          <el-option :label="item.path" :value="item.path" v-for="(item, index) in systeminfo.Runtimes" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('TabRam_equipment')" prop="isSynchronize">
<!--        设备-->
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort">添加设备</el-button>
      </el-form-item>
      <el-form-item label="" prop="port" v-for="(item, index) in portNum" :key="item">
        <el-input :placeholder="请输入宿主机" v-model="Rams.Devices[index].host" style="width: 40%;">
          <template slot="prepend">宿主机</template>
        </el-input>
        <el-input :placeholder="请输入容器端口" v-model="Rams.Devices[index].container" style="width: 40%;margin-left: 20px;">
          <template slot="prepend">容器</template>
        </el-input>
        <el-button @click="delPort(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>
    </el-form>
    <el-form :model="Rams" ref="ruleForm" label-width="100px" class="demo-ruleForm from" style="margin-bottom: 0px">
      <div class="title">
        {{$t('TabRam_RunandResource')}}
<!--        RunandResource:"资源设置",-->
      </div>
      <el-form-item :label="$t('TabRam_ResourceSettings')" prop="Memoryreservation" class="item">
        <el-slider
          class="slider"
          :max="Math.floor(systeminfo.MemTotal / 1000000)"
          v-model="Rams.Memoryreservation"
          :show-input-controls="false"
          :step="256"
          show-input>
        </el-slider>
        <div class="maxnum">
          {{ Math.floor(systeminfo.MemTotal / 1000000) }}
        </div>
      </el-form-item>
      <el-form-item :label="$t('TabRam_ReservedMemory')" prop="Memorylimit" class="item">
<!--          内存限制-->
        <el-slider
          class="slider"
          :max="Math.floor(systeminfo.MemTotal / 1000000)"
          v-model="Rams.Memorylimit"
          :show-input-controls="false"
          :step="256"
          show-input>
        </el-slider>
        <div class="maxnum">
          {{ Math.floor(systeminfo.MemTotal / 1000000) }}
        </div>
      </el-form-item>
      <el-form-item :label="$t('TabRam_CPULimit')" prop="CPUlimit" class="item">
<!--        cpu限制-->
        <el-slider
          class="slider"
          :max="1"
          :step=".25"
          v-model="Rams.CPUlimit"
          :show-input-controls="false"
          show-input>
        </el-slider>
        <div class="maxnum">
          1
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import post from '@/utils/post'
export default {
  data () {
    return {
      systeminfo: null, // 系统相关信息
      Rams: {
        Privileged: false, // 特权模式
        Runtime: '', // 运行方式
        Devices: [], // 设备
        Memoryreservation: 0, // 内存预留
        Memorylimit: 0, // 内存限制
        CPUlimit: 0 // cpu限制
      },
      portNum: [],
      i: 0
    }
  },
  watch: {
    // 监听vuex中是isupload是否变化为true，true则上传本组件的数据。
    '$store.state.isUpload': function () {
      if (this.$store.state.isUpload) {
        this.$store.commit('changeCrateData', ['Rams', this.Rams])
      }
    }
  },
  mounted () {
    const docker = 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/info"'
    post({ docker }, (res) => {
      this.systeminfo = res
    }, this)
  },
  methods: {
    // 添加开放端口的input框
    addPort () {
      this.portNum.push(this.i)
      this.Rams.Devices.push({ host: '', container: '' })
      this.i++
    },
    // 删除开放端口的input框
    delPort (item, index) {
      this.portNum = this.portNum.filter(data => {
        return data !== item
      })
      this.Rams.Devices.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.from{
  border: 1px solid #067FB5;
  border-radius: 15px;
  padding: 20px 10px 0px 10px;
  margin: 30px 0px;
  background: #F7FCFF;
  position: relative;
  .title{
    position: absolute;
    top: -14px;
    z-index: 10;
    left: 30px;
    font-size: 18px;
    font-weight: bold;
    background: #F7FCFF;
    padding: 0px 5px;
    border-radius: 5px;
  }
}
.submit{
  background: #067FB5;
  color: #fff;
  margin-left: 30px;
}
.slider{
  margin: 0px 20px;
}
.item{
  position: relative;
  .maxnum{
    position: absolute;
    top: -15px;
    right: 25%;
    font-size: 12px;
  }
}
</style>
